<template>
  <el-header>
    <div class="nav-top">
      <a href="/">
        <img src="../assets/tti.png" alt="" />
      </a>
      <div>
        <form class="d-flex" role="search" style="border: 1px solid #cccfd6">
          <input
            class="form-control"
            type="search"
            placeholder="搜索"
            aria-label="Search"
            style="width: 300px; border: none; border-radius: 0"
          />
          <button
            class="btn btn-outline-dark"
            type="submit"
            style="border-radius: 0; border: none"
          >
            <i class="el-icon-search"></i>
          </button>
        </form>

        <router-link to="/Login" v-if="flag">
          <button class="dl">登录</button>
        </router-link>
        <span v-else class="nav-item dropdown" style="position: relative">
          
          {{ username }}

          <ul class="dropdown-menu show" style="position: absolute">
            <li>
              <a class="dropdown-item" @click="logout" text-light>退出</a>
            </li>
          </ul>
        </span>
        |
        <router-link to="/Gwc"
          ><i class="el-icon-shopping-cart-full"></i
        ></router-link>
      </div>
    </div>
    <div class="nav-bottom">
      <nav class="navbar navbar-expand-lg bg-body-dark">
        <div class="container-fluid">
          <a class="navbar-brand text-light" href="/">首页</a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
              <li class="nav-item">
                <router-link to="/All" class="nav-link text-light">
                  全部
                </router-link>
              </li>
              <li class="nav-item">
                <router-link to="/Ar" class="nav-link text-light">
                  突击步枪
                </router-link>
              </li>
              <li class="nav-item">
                <router-link class="nav-link text-light" to="/Cb"
                  >卡宾枪</router-link
                >
              </li>
              <li class="nav-item">
                <router-link class="nav-link text-light" to="/Hg"
                  >手枪</router-link
                >
              </li>
              <li class="nav-item">
                <router-link to="/Smg" class="nav-link text-light">
                  冲锋枪
                </router-link>
              </li>
              <li class="nav-item">
                <router-link to="/Sg" class="nav-link text-light">
                  霰弹枪
                </router-link>
              </li>
              <li class="nav-item">
                <router-link class="nav-link text-light" to="/Dmr"
                  >精确射手步枪</router-link
                >
              </li>
              <li class="nav-item">
                <router-link class="nav-link text-light" to="/Sr"
                  >栓动步枪</router-link
                >
              </li>
              <li class="nav-item dropdown">
                <router-link
                  class="nav-link dropdown-toggle text-light"
                  to="/Other"
                >
                  其他
                </router-link>
                <ul class="dropdown-menu show">
                  <li>
                    <a class="dropdown-item" href="/MJ" text-light>瞄具</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="/PJ" text-light
                      >战术设备&配件</a
                    >
                  </li>
                  <li>
                    <a class="dropdown-item" href="/MGZ" text-light>弹匣</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="/FJ" text-light>防具</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </el-header>
</template>

<script>
import axios from "axios";
import store from "@/store/index";
export default {
  data() {
    return {
      flag: true,
      username: this.$store.state.user.username
    };
  },
  created() {
    this.findToken();
  },

  methods: {
    findToken() {
      if (
        this.$store.state.token != null
      ) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
    logout() {
      this.$store.state.token = null;
      axios.post("/api" + "/user/logout");
      store.commit("getDL", false);
      store.commit("getuser",null)
      this.findToken();
      this.$router.go(0);
    },
  },
};
</script>

<style>
.el-container {
  margin: auto;
}
html,
body {
  height: 100vh;
}
.el-header {
  height: 136px !important;
  padding: 0 !important;
}
.dropdown-menu {
  transition: 1s;
}
.navbar {
  width: 1200px;
  margin: auto;
}
.nav-top {
  height: 88px;
  width: 1200px;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}
.nav-top > div {
  height: 46px;
  display: flex;
  align-items: center;
}
.nav-top > div > * {
  margin: 0 10px;
}
.nav-top > div > a {
  color: #000;
}
.nav-top > div > i {
  font-size: 36px;
}
.nav-bottom {
  height: 48px;
  background: #000000 !important;
}

.el-footer {
  background-color: #995;
  color: #333;
  text-align: center;
  bottom: 0;
}
.el-main {
  margin: auto;
  width: 1200px;
  background-color: #fff;
  color: #333;
  text-align: center;
}

.dl {
  display: inline-block;
  height: 36px;
  width: 60px;
  text-decoration: none;
  text-align: center;
  text-justify: center;
  border: 1px solid rgb(204, 207, 214);
}

.dropdown-toggle::after {
  content: "";
  bottom: 5px;
  height: 1px;
  width: 0%;
  display: block;
  background: #fff;
  position: absolute;
  left: 0;
  border: none !important;
  transition: all 0.5s;
}
.dropdown-toggle:hover:after {
  width: 80%;
}
.dropdown-menu.show {
  position: relative;
  animation: togg 0.3s;
}
.nav-item.dropdown > .dropdown-menu {
  display: none;
}
.nav-item.dropdown:hover > .dropdown-menu {
  display: block;
}
@keyframes togg {
  0% {
    top: 100px;
  }
  100% {
    top: 40px;
  }
}
li {
  margin: 0 5px !important;
}
</style>
